<template>
  <div>
    <!-- 导航部分开始 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>质量管理</el-breadcrumb-item>
      <el-breadcrumb-item>检测项设置</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 导航部分结束 -->
    <!--  搜索栏开始 -->
    <el-form style="margin-top: 15px;" :inline="true" :model="queryIndex" class="demo-form-inline">
      <el-form-item label="检测项编码">
        <el-input v-model="queryIndex.indexCode" placeholder="检测项编码" clearable />
      </el-form-item>
      <el-form-item label="检测项名称">
        <el-input v-model="queryIndex.indexName" placeholder="检测项名称" clearable />
      </el-form-item>
      <el-form-item label="检测项类型">
        <el-select v-model="queryIndex.indexType" placeholder="检测项类型">
          <el-option label="尺寸" value="尺寸" />
          <el-option label="外观" value="外观" />
          <el-option label="重量" value="重量" />
          <el-option label="性能" value="性能" />
          <el-option label="成分" value="成分" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadIndexs">搜索</el-button>
      </el-form-item>
    </el-form>
    <!--  搜索栏结束 -->
    <!-- 工具栏开始 -->
    <div class="flex">
      <el-button title="新增字典" @click="this.addIndexDialogVisible = true" type="primary">
        <el-icon>
          <Plus />
        </el-icon>
      </el-button>
      <el-button @click="handlerEditIndexs" title="编辑选中字典" type="primary">
        <el-icon>
          <EditPen />
        </el-icon>
      </el-button>
      <el-button @click="handlerDeleteIndexs" title="删除选中字典" type="primary">
        <el-icon>
          <Delete />
        </el-icon>
      </el-button>
    </div>
    <!-- 工具栏结束 -->
    <!-- 表格 开始 -->
    <el-table
      ref="indexTable"
      :data="indexs"
      max-height="800px"
      stripe="true"
      border="true"
      style="width: 90%;margin-top: 10px;"
    >
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column align="center" label="检测项编码" property="indexCode" />
      <el-table-column align="center" label="检测项名称" property="indexName" />
      <el-table-column align="center" label="检测项类型" property="indexType">
        <template #default="scope">
          <el-link>{{ scope.row.indexType }}</el-link>
        </template>
      </el-table-column>
      <el-table-column align="center" label="检测工具" property="qcTool" />

      <el-table-column width="150" align="center" label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm
            confirm-button-text="是"
            cancel-button-text="点错了"
            @confirm="handleDelete(scope.row)"
            title="您是否要删除这行数据"
          >
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 结束 -->
    <!-- 分页栏开始 -->
    <el-pagination
      style="margin-top: 15px;"
      :page-size="indexLimit"
      :pager-count="indexMaxPage"
      @current-change="changePage"
      background
      layout="prev, pager, next"
      :total="indexTotal"
    />
    <!-- 分页栏结束 -->

    <!-- 添加字典的弹窗窗体开始-->
    <el-dialog v-model="addIndexDialogVisible" title="添加检测项" width="600" align-center>
      <!-- 添加用户的表单 -->
      <el-form label-width="100px" :model="newIndex" style="max-width: 460px">
        <el-form-item label="检测项编码">
          <el-input v-model="newIndex.indexCode" />
          <el-switch
            @change="autoGenerateIndexCode"
            v-model="autoIndexCode"
            class="ml-2"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          />
        </el-form-item>
        <el-form-item label="检测项名称">
          <el-input v-model="newIndex.indexName" />
        </el-form-item>
        <el-form-item label="检测项类型">
          <el-select v-model="newIndex.indexType" placeholder="检测项类型">
            <el-option label="尺寸" value="尺寸" />
            <el-option label="外观" value="外观" />
            <el-option label="重量" value="重量" />
            <el-option label="性能" value="性能" />
            <el-option label="成分" value="成分" />
          </el-select>
        </el-form-item>
        <el-form-item label="检测工具">
          <el-input v-model="newIndex.qcTool" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" :rows="2" v-model="newIndex.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelAddIndex">取消</el-button>
          <el-button type="primary" @click="doAddIndex">提交</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 添加用户的弹窗窗体结束-->

    <!--编辑检测的弹窗窗体开始-->
    <el-dialog v-model="indexEditDrawer" title="编辑检测项" width="600" align-center>
      <!-- 编辑检测的表单 -->
      <el-form label-width="100px" :model="editIndex" style="max-width: 460px">
        <el-form-item label="检测项编码">
          <el-input v-model="editIndex.indexCode" />
          <el-switch
            @change="editGenerateIndexCode"
            v-model="editIndexCode"
            class="ml-2"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          />
        </el-form-item>
        <el-form-item label="检测项名称">
          <el-input v-model="editIndex.indexName" />
        </el-form-item>
        <el-form-item label="检测项类型">
          <el-select v-model="editIndex.indexType" placeholder="检测项类型">
            <el-option label="尺寸" value="尺寸" />
            <el-option label="外观" value="外观" />
            <el-option label="重量" value="重量" />
            <el-option label="性能" value="性能" />
            <el-option label="成分" value="成分" />
          </el-select>
        </el-form-item>
        <el-form-item label="检测工具">
          <el-input v-model="editIndex.qcTool" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" :rows="2" v-model="editIndex.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelEdit">取消</el-button>
          <el-button type="primary" @click="doEditIndex">提交</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑检测的弹窗窗体结束-->
  </div>
</template>

<script>
import indexRequest from "../../../api/index-api.js";
import tools from "../../../util/tools.js";
export default {
  data() {
    return {
      queryDcit: {}, // 分装查询字典条件的字典对象
      queryIndex: {}, //分装查询检测项设置条件的对象
      indexs: [], // 检测项数据列表
      indexCurrPage: 1, // 检测项分页的当前页码
      indexLimit: 5, // 检测项分页的每页大小
      indexTotal: 0, // 检测项列表的总条数
      indexMaxPage: 1, // 检测项列表的最大页码

      // 新增检测项相关属性
      addIndexDialogVisible: false, // 新增检测项的弹窗标志
      newIndex: {}, // 封装新增的检测项信息

      currIndex: {}, // 保存正在操作的检测项信息

      editIndex: {}, //封装编辑检测项信息
      indexEditDrawer: false, //行修改检测项信息的弹窗标志
      autoIndexCode: false, //新增自动生成的开关绑定
      editIndexCode: false, //编辑自动生成的开关绑定
      newIndex: {
        indexCode: undefined
      },
      editIndex: {
        indexCode: undefined
      }
    };
  },
  methods: {
    /**
     *新增 自动生成编号的提交按钮事件
     */
    autoGenerateIndexCode(val) {
      if (val) {
        indexRequest.generateIndexCode(res => {
          this.newIndex.indexCode = res.data;
        });
      }
    },
    /**
     *编辑 自动生成编号的提交按钮事件
     */
    editGenerateIndexCode(val) {
      if (val) {
        indexRequest.generateIndexCode(res => {
          this.editIndex.indexCode = res.data;
        });
      }
    },

    /**
     * 编辑检测项的提交按钮事件
     */
    doEditIndex() {
      indexRequest.update(this.editIndex, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "编辑成功"
          });
          // 关闭窗体
          this.indexEditDrawer = false;
          // 重新加载数据
          this.loadIndexs(); // 加载当前页
          this.editIndex = {}; //制空
        } else if (res.code == 300) {
          this.$message({
            type: "warning",
            message: "编号重复"
          });
        } else {
          this.$message({
            type: "error",
            message: "编辑失败"
          });
        }
      });
    },
    /**
     * 新增检测项的提交按钮事件
     */
    doAddIndex() {
      // 数据校验：略
      // 提交数据
      indexRequest.save(this.newIndex, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "保存成功"
          });
          // 关闭窗体
          this.cancelAddIndex();
          // 重新加载数据
          this.loadIndexs(); // 加载当前页
        } else if (res.code == 300) {
          this.$message({
            type: "warning",
            message: res.msg
          });
        } else {
          this.$message({
            type: "error",
            message: "保存失败"
          });
        }
      });
    },
    /**
     * 取消新增检测项的按钮事件
     */
    cancelAddIndex() {
      // 关闭窗体
      this.addIndexDialogVisible = false;
      // 清空newDict
      this.newIndex = {};
    },
    /**
     * 行删除事件
     * @param {} row
     */
    handleDelete(row) {
      indexRequest.delete(row.indexCode, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.loadIndexs(); //更新页面
        } else {
          this.$message({
            type: "error",
            message: "删除失败"
          });
        }
      });
    },
    /**
     * 取消编辑操作
     */
    cancelEdit() {
      //将编辑的用户制空
      this.editIndex = {};
      //关闭弹窗
      this.indexEditDrawer = false;
    },

    /**
     * 行编辑事件
     * @param {*} row
     */
    handleEdit(row) {
      indexRequest.get(row.indexCode, res => {
        this.editIndex = res.data;
        this.indexEditDrawer = true;
      });
    },
    /**
     * 时间毫秒数转换为对应的字符串
     * @param {*} time
     */
    timeFormatter(row, column, time) {
      return tools.timeMillisToString(time);
    },
    /**
     * 工具栏-选中删除按钮事件
     */
    handlerDeleteIndexs() {},
    /**
     * 工具栏-选中编辑按钮事件
     */
    handlerEditIndexs() {},
    /**
     * 检测项列表的翻页函数
     * @param {} value  最新页码
     */
    changePage(value) {
      this.indexCurrPage = value;
      this.loadIndexs();
    },
    /**
     * 加载检测项数据
     */
    loadIndexs() {
      indexRequest.list(
        this.indexCurrPage,
        this.indexLimit,
        this.queryIndex,
        res => {
          // 设置数据
          this.indexs = res.data.list;
          this.indexTotal = res.data.total;
          this.indexMaxPage = res.data.pages;
        }
      );
    }
  },
  mounted() {
    //默认加载检测项数据列表
    this.loadIndexs();
  }
};
</script>

<style>
</style>